<template>
	<view class="no-auth-agent-layout">
		<z-paging ref="pagingRef" v-model="dataList" @query="queryList">
			<template #top>
				<view class="header-box">
					<view class="menu-box">
						<uv-tabs :list="menuList" :activeStyle="{color:'#5F56EF',fontSize:'32rpx'}" :inactiveStyle="{color:'#666666',fontSize:'32rpx'}" :itemStyle="{height:'80rpx',padding:'0 30rpx'}" lineColor="#5F56EF" @click="selectItem"></uv-tabs>
					</view>
					<!-- 搜索框 -->
					<view class="search-box">
						<xh-agent-search :showSort="false" :placeholder="selectType == 0 ? '请输入手机号' : '请输入代理商名称或手机号'" v-model="keywords" @searchResult="searchResult"></xh-agent-search>
					</view>
				</view>
			</template>
			<view class="agent-list" v-if="selectType == '01'">
				<view class="agent-list-item" v-for="(item,index) in dataList" :key="index">
					<image src="/static/operate/agent_photo.png" mode="aspectFit"></image>
					<view class="agent-list-item-content-no-auth">
						<text>{{item.userName}}</text>
						<text>{{dayjs(item.createTime).format('YYYY-MM-DD')}} 注册</text>
					</view>
					<view class="agent-list-item-right" @tap="invitedAuth(item)">
						<text>邀请认证</text>
						<xh-icon icon="icon_jiantou"></xh-icon>
					</view>
				</view>
			</view>
			<view class="agent-list" v-else>
				<view class="agent-list-item" v-for="(item,index) in dataList" :key="index">
					<image src="/static/operate/agent_photo.png" mode="aspectFit"></image>
					<view class="agent-list-item-content">
						<text>{{item.agentName}}</text>
						<text>{{item.tel}}</text>
						<text>{{dayjs(item.registrationDate).format('YYYY-MM-DD')}} 认证</text>
					</view>
					<view class="agent-list-item-right" @tap="invitedAuth(item)">
						<text>{{item.authStatus == '02' ? '审核中' : '邀请认证'}}</text>
						<xh-icon icon="icon_jiantou" v-if="item.authStatus != '02'"></xh-icon>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { getAgentList, getNoAuthAgentList } from '@/common/api/api.js'
	import dayjs from 'dayjs'
	const pagingRef = ref(null)
	const dataList = ref([])
	// 选择的类型
	const selectType = ref('01')
	const keywords = ref('')
	const menuList = ref([{
			name: '未认证',
			type: '01'
		},
		{
			name: '审核中',
			type: '02'
		},
		{
			name: '认证失败',
			type: '03'
		},
	])
	// 选择选项卡回调
	const selectItem = (item) => {
		selectType.value = item.type
		dataList.value = []
		pagingRef.value.reload()
	}
	// 搜索结果回调
	const searchResult = () => {
		pagingRef.value.reload()
	}
	//邀请认证
	const invitedAuth = (item) => {
		let tel = ''
		if (item.authStatus == '02') {
			return
		}
		if (item.authStatus == '01') {
			tel = item.userName
		}
		if (item.authStatus == '03') {
			tel = item.tel
		}
		console.log(tel)
		uni.$utils.sendMessage(tel,'【汇拓宝】尊敬的合作伙伴，欢迎您加入汇拓宝，请关注微信公众号“汇拓宝”下载APP进行实名认证，开启财富密码!')

	}
	// 获取列表数据
	const queryList = async (pageNo) => {
		let params = {}
		params.userName = keywords.value
		if (selectType.value == '01') {
			const res = await getNoAuthAgentList(params, pageNo)
			const list = res.result
			if (pageNo == 1) {
				dataList.value = []
			}
			dataList.value = [...dataList.value, ...list]
			pagingRef.value.completeByTotal(list, res.page.totalElements)
		} else {
			params.identStatus = selectType.value
			params.sortField = 'IDENT_TIME'
			params.sortType = 'DESC'
			const res = await getAgentList(params, pageNo)
			const list = res.result
			if (pageNo == 1) {
				dataList.value = []
			}
			dataList.value = [...dataList.value, ...list]
			pagingRef.value.completeByTotal(list, res.page.totalElements)
		}
	}
</script>

<style lang="scss" scoped>
	.no-auth-agent-layout {
		.header-box {
			margin-top: 1px;
		}

		.menu-box {
			background-color: #fff;
			display: flex;
			justify-content: center;
		}

		.search-box {
			padding: 30rpx 30rpx 0;
		}

		.agent-list {
			.agent-list-item {
				display: flex;
				align-items: center;
				background-color: #fff;
				margin: 0 30rpx 20rpx;
				padding: 30rpx;
				border-radius: 20rpx;

				image {
					width: 96rpx;
					height: 96rpx;
				}

				.agent-list-item-content-no-auth {
					display: flex;
					flex-direction: column;
					margin-left: 20rpx;

					text:nth-child(2) {
						margin-top: 16rpx;
						font-size: 24rpx;
						color: $xh-theme-color;
					}
				}

				.agent-list-item-content {
					display: flex;
					flex-direction: column;
					margin-left: 20rpx;

					text:nth-child(2) {
						margin-top: 12rpx;
						font-size: 24rpx;
						color: $xh-color-9;
					}

					text:nth-child(3) {
						margin-top: 12rpx;
						font-size: 24rpx;
						color: #ffa435;
					}
				}

				.agent-list-item-right {
					margin-left: auto;
					font-size: 26rpx;
					color: #E06138;
					display: flex;
					align-items: center;
				}
			}
		}

	}
</style>